<template>
  <div id="app" v-cloak>
    <!-- 骨架屏 -->
    <div v-if="loading" class="skeleton-container">
      <div class="skeleton-banner"></div>
      <div class="skeleton-inquiry"></div>
      <div class="skeleton-project"></div>
      <div class="skeleton-service"></div>
    </div>
    <div v-if="!loading" class="main-content">
      <!-- 轮播图部分 -->
      <HomeBanner :banner-data="banner_box" />
      <!-- 货运导航栏 -->
      <TransportTabs/>
      <TransportServiceInfo :serviceInfo="serviceInfo" :features="features"/>
      <TransportServiceClient :clientService="clientService"/>
    </div>
  </div>
</template>

<script>
import {bannerList} from "@/api/banner/banner"
import {getServiceDetailsUsContent} from "@/api/serviceDetails/serviceDetails"
import {getFeatureUsContent} from "@/api/feature/feature"
import { listItemType} from "@/api/item/item";
import HomeBanner from "../components/home/HomeBanner.vue";
import TransportTabs from "../components/TransportTabs.vue";
import TransportServiceInfo from "../components/transport/TransportServiceInfo.vue";
import TransportServiceClient from "../components/transport/TransportServiceClient.vue";

export default {
  components: {TransportServiceClient, TransportServiceInfo, HomeBanner,TransportTabs},
  data() {
    return {
      loading: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      banner_box: [],
      serviceInfo: {},
      features: [],
      clientService: [],
    }
  },
  computed: {

  },
  async created() {

    await this.getBannerList(); // 先加载首屏关键数据
    this.$nextTick(() => {
      // 分批加载其他非关键数据
      Promise.all([
        this.getServiceDetails(),
        this.getListFeatureType(),
        this.getListItemType(),
      ]).catch(error => {
        console.error("加载数据出错:", error);
      });
    });
  },
  beforeDestroy() {

  },
  watch: {
    '$route'(to) {
      // 路由变化时更新激活状态
      this.activeTab = to.path;
    }
  },
  methods: {

    /** 查询客户服务项列表 铁路*/
    getListItemType() {
      this.loading = true
      listItemType(2).then(response => {
        this.clientService = response.data;
        this.loading = false
      })
    },
    /** 查询运输功能列表  铁路*/
    getListFeatureType() {
      this.loading = true
      getFeatureUsContent(2).then(response => {
        this.features = response.data;
        this.loading = false
      })
    },
    /** 查询铁路运输服务详情 */
    getServiceDetails() {
      this.loading = true
      getServiceDetailsUsContent(2).then(response => {
        this.serviceInfo = response.data;
        this.loading = false
      })
    },
    /** 查询轮播图 */
    getBannerList() {
      this.loading = true
      bannerList(3).then(response => {
        this.banner_box = response.data;
        this.loading = false
      })
    },


  }
}
</script>

<style scoped lang="scss">
[v-cloak] {
  display: none;
}

.skeleton-container {
  width: 100%;
  min-height: 2000px;
}

/* 骨架屏动画 */
.skeleton-banner {
  height: 800px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* 新增全局过渡样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active {
  animation: slide-up 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 图片加载过渡效果 */
.lazy-image {
  transition: opacity 0.5s ease-in-out;
  will-change: opacity;
}

@keyframes slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}


</style>
